<script setup lang="ts">
import { ref, onMounted } from "vue";
import { array } from "vue-types";
import ReCol from "@/components/ReCol";

import { Calendar, Search } from "@element-plus/icons-vue";
import AttachMoney from "@iconify-icons/mdi/attach-money";
import HouseCityOutline from "@iconify-icons/mdi/house-city-outline";
import ContactlessPayment from "@iconify-icons/mdi/contactless-payment";

import { FormProps } from "../utils/types";
import { getSupplieList, getPaymentMethodList } from "@/api/dashboard";
import { createRules } from "../utils/rule";

/** 供应商列表 */
const supplieList = ref([]);
/** 支付方式列表 */
const paymentList = ref([]);

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    title: "",
    /**商品id列表 */
    fgoodsids: "",
    /**订单号 */
    orderno: "",
    /**支付方式 */
    paymethod: "",
    /**总支出 */
    price: 0,
    /**供应商名称 */
    suppliername: "",
    /**寄件运费 */
    sendSideFreight: 0,
    /**收货运费 */
    receiveSideFreight: 0
  })
});
const newFormInline = ref(props.formInline);

const ruleFormRef = ref();

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });

onMounted(() => {
  getSupplieList().then(res => {
    supplieList.value = res.data;
    console.log(supplieList.value);
  });
  getPaymentMethodList().then(res => {
    paymentList.value = res.data;
  });
});
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="createRules"
    label-width="96px"
  >
    <el-row :gutter="30">
      <re-col :value="24">
        <el-form-item label="商品ID">
          <el-input v-model="newFormInline.fgoodsids" :disabled="true" />
        </el-form-item>
      </re-col>
      <re-col :value="24">
        <el-form-item label="订单号">
          <el-input v-model="newFormInline.orderno" :disabled="true" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="支付方式" prop="paymethod">
          <el-select
            v-model="newFormInline.paymethod"
            placeholder="请选择支付方式"
            class="!w-[180px]"
            filterable
            allow-create
            default-first-option
          >
            <template #prefix>
              <IconifyIconOffline :icon="ContactlessPayment" width="14" />
            </template>
            <el-option
              v-for="(item, index) in paymentList"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="供应商名称" prop="suppliername">
          <el-select
            v-model="newFormInline.suppliername"
            placeholder="请选择供应商"
            class="!w-[180px]"
            filterable
            allow-create
            default-first-option
          >
            <template #prefix>
              <IconifyIconOffline :icon="HouseCityOutline" width="14" />
            </template>
            <el-option
              v-for="(item, index) in supplieList"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="货物支出" prop="price">
          <el-input
            v-model.number="newFormInline.price"
            placeholder="请输入金额"
            clearable
            style="width: 180px"
            type="number"
          >
            <template #prefix>
              <IconifyIconOffline :icon="AttachMoney" width="14" />
            </template>
          </el-input>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="寄件运费" prop="sendSideFreight">
          <el-input
            v-model.number="newFormInline.sendSideFreight"
            placeholder="请输入寄件运费"
            clearable
            style="width: 180px"
            type="number"
          >
            <template #prefix>
              <IconifyIconOffline :icon="AttachMoney" width="14" />
            </template>
          </el-input>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="收货运费" prop="receiveSideFreight">
          <el-input
            v-model.number="newFormInline.receiveSideFreight"
            placeholder="请输入收货运费"
            clearable
            style="width: 180px"
            type="number"
          >
            <template #prefix>
              <IconifyIconOffline :icon="AttachMoney" width="14" />
            </template>
          </el-input>
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<style lang="scss" scoped></style>
